'use client'
import { useState } from 'react'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { TextSection } from '@/app/movie/components/text-section'
import PhotoUploadLayout from './components/PhotoUploadLayout'
import GreenIcon from '@/assets/icons/green-book.svg'
import DouyinIcon from '@/assets/icons/douying.svg'
import { type AudioResponse } from '@/services'
import { useGraphicStore } from '@/stores/audio'
import TikTokPage from './components/TikTok/index'

// 1. 首先确保正确导入
// TODO: 这里执行 Toast 会报错
// import { Toast } from 'antd-mobile'

const contentTabs = [
  {
    value: 'instgram',
    label: 'Instgram',
    Icon: GreenIcon,
  },
  {
    value: 'tiktok',
    label: 'Tiktok',
    Icon: DouyinIcon,
  },
]

export default function HomePage() {
  const { createdText, createdId } = useGraphicStore()
  const [formSectionParams, setFormSectionParams] = useState({})
  const commit = (data: AudioResponse) => {
    console.log('data:', data)
  }
  // const voidFn = () => {}
  const commitText = (data: any) => {
    console.log('🚀 ~ commitText ~ data:', data)
  }
  const [currentTab, setCurrentTab] = useState('instgram')
  const handleToggleTabs = (value: string) => {
    // useGraphicStore.getState().resetState()
    setCurrentTab(value)
  }
  return (
    <div className="w-full flex flex-col">
      <Tabs value={currentTab} onValueChange={handleToggleTabs} className="p-4">
        <TabsList className="bg-[#B9AEFF]/10 border-[#573CFF]/10 border rounded-lg">
          {contentTabs.map((tab) => (
            <TabsTrigger
              key={tab.value}
              value={tab.value}
              className="gap-2 text-white data-[state=active]:bg-primary data-[state=active]:rounded-lg"
              /* data-[state=active]:shadow-current */
            >
              {/* <tab.Icon width={20} height={20} /> */}
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
      <div className="relative flex flex-1 pt-1">
        {currentTab === 'instgram' && (
          <>
            <PhotoUploadLayout formSectionParams={formSectionParams} commit={commit}>
              <TextSection
                inGraphic={true}
                commit={commitText}
                createdId={createdId}
                defText={createdText}
                setFormSectionParams={(v: any) => {
                  setFormSectionParams(v)
                }}
              />
            </PhotoUploadLayout>
          </>
          // <div className="flex flex-1 gap-x-6 pr-5">
          //   <PhotoUploadLayout
          //     formSectionParams={formSectionParams}
          //     commit={commit}
          //   ></PhotoUploadLayout>
          //   <TextSection
          //     className="pt-3"
          //     inGraphic={true}
          //     commit={commitText}
          //     createdId={createdId}
          //     defText={createdText}
          //     setFormSectionParams={(v: any) => {
          //       setFormSectionParams(v)
          //     }}
          //   />
          // </div>
        )}
        {currentTab === 'tiktok' && (
          <div className="absolute left-0 top-0 bottom-0 right-0 overflow-y-auto my-scrollbar">
            <TikTokPage></TikTokPage>
          </div>
        )}
      </div>
    </div>
  )
}
